<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
</head>
<body>
<div id="app">
    <!--禁言模态框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">禁言用户</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label class="col-form-label">用户名:</label>
                            <input type="text" class="form-control" v-model="curUser.username" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="col-form-label">昵称:</label>
                            <input type="text" class="form-control" v-model="curUser.nickname" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="col-form-label">禁言到:</label>
                            <input type="datetime-local" class="form-control" v-model="curUser.noSpeakTime">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="submitJinYan">提交</button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 会员列表</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <input @keyup.enter="loadData()" v-model="params.username" class="input"
                           type="text" placeholder="输入用户名快速查找">
                </li>
                <li>
                    <input @keyup.enter="loadData()" v-model="params.nickname" class="input"
                           type="text" placeholder="输入昵称快速查找">
                </li>

            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>头像</th>
                <th>昵称</th>
                <th>手机号</th>
                <th>邮箱</th>
                <th>禁言状态</th>
                <th>禁言日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--在这里遍历列表显示记录-->
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.username }}</td>
                <td>
                    <img :src="item.avatar" height="100" alt="用户头像">
                </td>
                <td>{{ item.nickname }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.email }}</td>
                <td>
                    <span v-if="item.noSpeakStatus === 0" class="text-success">正常</span>
                    <span v-if="item.noSpeakStatus === 1" class="text-danger">禁言中</span>
                </td>
                <td>{{ item.noSpeakTime || '无' }}</td>
                <td>
                    <button class="btn btn-sm btn-warning" @click="jinYan(item)">禁言</button>
                    <button class="btn btn-sm btn-danger" @click="del(item)">封禁</button>
                </td>
            </tr>
            <tr>
                <td colspan="9" align="center">
                    <nav aria-label="Page navigation ">
                        <ul class="pagination">
                            <li class="page-item" v-if="page.hasPreviousPage">
                                <a class="page-link" href="#" @click.prevent="goto(page.prePage)">上一页</a>
                            </li>
                            <li :class="'page-item ' + (page.pageNum===item?'active':'')"
                                v-for="item in page.navigatepageNums" :key="item">
                                <a class="page-link" href="#" @click.prevent="goto(item)">{{ item }}</a>
                            </li>
                            <li class="page-item" v-if="page.hasNextPage">
                                <a class="page-link" href="#" @click.prevent="goto(page.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            list: [],
            page: {},
            curUser:{},
            params:{
                pageNum: 1,
                pageSize: 5,
                username: null,
                nickname: null
            }
        },
        methods: {
            // 修复方法名大小写问题
            jinYan(item){
                // 执行对象拷贝
                this.curUser = {...item};
                // 显示模态框
                $('#exampleModal').modal('show');
            },
            submitJinYan(){
                let url = '/api/v1/user/modifyNoSpeakStatus';
                let params = {
                    "id": this.curUser.id,
                    "noSpeakStatus": 1,
                    // 修复时间格式问题
                    //"noSpeakTime": this.curUser.noSpeakTime ? this.curUser.noSpeakTime.replace('T', ' ') + ':00' : null
                };
                axios.post(url, params)
                    .then(res => {
                        alert(res.data.message || '操作成功');
                        $('#exampleModal').modal('hide');
                        this.loadData();
                    })
                    .catch(error => {
                        console.error('禁言失败:', error);
                        alert('操作失败');
                    });
            },
            // 修复删除功能参数和确认消息问题
            del(item){
                if(confirm(`确认要封禁该账号${item.nick_name}吗?`)){
                    let url = '/api/v1/user/remove/' + item.id;
                    axios.post(url)
                        .then(res => {
                            alert(res.data.message || '删除成功');
                            this.loadData();
                        })
                        .catch(error => {
                            console.error('删除失败:', error);
                            alert('操作失败');
                        });
                }
            },
            // 修复分页跳转问题
            goto(pn) {
                this.params.pageNum = pn;
                this.loadData();
            },
            // 修复数据加载和绑定问题
            loadData() {
                let url = '/api/v1/user/page';
                axios.post(url, this.params)
                    .then(res => {
                        // 正确绑定分页数据和列表数据
                        this.page = res.data;
                        this.list = res.data.list;
                    })
                    .catch(error => {
                        console.error('加载数据失败:', error);
                        this.list = [];
                    });
            }
        },
        mounted() {
            // 手动调用分页查询的函数
            this.loadData();
        }
    })
</script>
</body>
</html>
